<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" href="/css/video/videoPlatform.css">
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <style>
        .hideBtn{
            width: 0px;
            height:0px;
            overflow: hidden;
        }
        body,html{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>

    <script src="/js/jquery/jquery-video.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/video/videoPlatform.js"></script>



    <!-- 以下是事件触发函数接口 -->
    <script language="javascript" for="PreviewOcx" event="FireWindowsNumber(iSel)">
        szMsg = "窗口分割消息,窗口数" + iSel;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireSetPreset(iNumber)">
        szMsg = "设置预置点" + iNumber;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireGotoPreset(iNumber)">
        szMsg = "调用预置点" + iNumber;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireSelectInfo(iSel)">
        szMsg = "监控点信息显示,窗口" + iSel;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireSelectStopInfo(iSel)">
        szMsg = "关闭监控点信息显示,窗口" + iSel;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireSelectWindow(iSel)">
        szMsg = "窗口选择消息,窗口" + iSel;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStartRealPlay(iSel)">
        szMsg = "开始预览消息" + iSel;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopRealPlay(iSel)">
        szMsg = "停止预览消息" + iSel ;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopPreviewAll(iSel)">
        szMsg = "停止所有预览消息" ;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireOpenSound(iSel)">
        szMsg = "打开声音消息" ;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireCloseSound(iSel)">
        szMsg = "关闭声音消息" ;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireChangeWindow(iFrom,iTo)">
        szMsg = "互换窗口消息"+ "从" +iFrom+"到"+iTo;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FirePTZCtrl(iWindowID,iCtrlID,iSpeed)">
        szMsg = "云台控制消息:"+ "窗口:" +iWindowID+"控制:"+iCtrlID+"速度:"+ iSpeed;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStartRecord(iWindowID)">
        szMsg = "开始录像"+ iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStartMutiPTZ(iWindowID)">
        szMsg = "打开云镜"+ iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopMutiPTZ(iWindowID)">
        szMsg = "关闭云镜"+ iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopRecord(iWindowID)">
        szMsg = "停止录像"+ iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireCatchPic(szPath,iWindowID)">
        szMsg = "抓图"+ "路径" +szPath+"窗口"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireInstCatchPic(szPath,iWindowID,iCounts,iSpanTimes)">
        szMsg = "连续抓图"+ "路径" +szPath+"窗口"+iWindowID+"连抓张数:"+iCounts+"时间间隔:"+iSpanTimes+"ms";
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStartSound(iWindowID)">
        szMsg = "打开声音 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopSound(iWindowID)">
        szMsg = "关闭声音 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStartZoom(iWindowID)">
        szMsg = "打开电子放大 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopZoom(iWindowID)">
        szMsg = "关闭电子放大 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStartTalk(iWindowID)">
        szMsg = "打开对讲 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopTalk(iWindowID)">
        szMsg = "关闭对讲 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireSonStream(iWindowID)">
        szMsg = "切换成子码流 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireMainStream(iWindowID)">
        szMsg = "切换成主码流 "+ "窗口:"+iWindowID;
        document.getElementById("MsgInfo").value=szMsg;
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStartPlayBack(lWindowID)">
        //alert("StartPlayBack"+lWindowID);
    </script>

    <script language="javascript" for="PreviewOcx" event="FireStopPlayBack(lWindowID)">
        //alert("StopPlayBack"+lWindowID);
    </script>

</head>
<body onLoad="init();">
<div  class="showBtn hideBtn" >
    IP:&nbsp;<input id="TextIP" type="text" value="" />&nbsp;&nbsp;&nbsp;
    port:&nbsp;<input id="TextPort" type="text" value="80" />&nbsp;&nbsp;
    user:&nbsp;<input id="TextName" type="text" value="" />&nbsp;&nbsp;&nbsp;
    pwd:&nbsp;<input id="TextPwd" type="password" value="" />&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;
    <input type="button" value="登录" onClick="loginCMS();"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="退出" onClick="logoutCMS();"/>
</div>
<div style="width:100%;height: 100%;">
    <input id="Hidden1" type="hidden" />
    <div class="showBtn hideBtn" style="width:250px;float:left;overflow:hidden">
        &nbsp;<br />
        <table width="100%" style="border-spacing: 0px;" >
            <tr>
                <td width="50%" align="center"><input type="button" value="开始预览" onClick="StartPlayView()" /></td>
                <td width="50%" align="center"><input id="TextCameraId"  size="7" type="text" /></td>
            </tr>
            <tr>
            </tr>
            <tr>
                <td align="center"><input type="button" value="指定预览" onClick="StartPlayView_InWnd()" /></td>
                <td align="center">
                    <select id="SelectWnd" name="D2">
                        <option value = "0">1</option>
                        <option value = "1">2</option>
                        <option value = "2">3</option>
                        <option value = "3">4</option>
                        <option value = "4">5</option>
                        <option value = "5">6</option>
                        <option value = "6">7</option>
                        <option value = "7">8</option>
                        <option value = "8">9</option>
                        <option value = "9">10</option>
                        <option value = "10">11</option>
                        <option value = "11">12</option>
                        <option value = "12">13</option>
                        <option value = "13">14</option>
                        <option value = "14">15</option>
                        <option value = "15">16</option>
                        <option value = "16">17</option>
                        <option value = "17">18</option>
                        <option value = "18">19</option>
                        <option value = "19">20</option>
                        <option value = "20">21</option>
                        <option value = "21">22</option>
                        <option value = "22">23</option>
                        <option value = "23">24</option>
                        <option value = "24">25</option>
                    </select></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="空闲预览" onClick="StartPlayView_Free()" /></td>
                <td width="50%" align="center"><input type="button" value="停止预览" onclick = "StopPlayView()" /></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="指定停止" onClick="StopPreviewInWnd();" /></td>
                <td width="50%" align="center">
                    <select id="StopWnd" name="D5">
                        <option value = "0">1</option>
                        <option value = "1">2</option>
                        <option value = "2">3</option>
                        <option value = "3">4</option>
                        <option value = "4">5</option>
                        <option value = "5">6</option>
                        <option value = "6">7</option>
                        <option value = "7">8</option>
                        <option value = "8">9</option>
                        <option value = "9">10</option>
                        <option value = "10">11</option>
                        <option value = "11">12</option>
                        <option value = "12">13</option>
                        <option value = "13">14</option>
                        <option value = "14">15</option>
                        <option value = "15">16</option>
                        <option value = "16">17</option>
                        <option value = "17">18</option>
                        <option value = "18">19</option>
                        <option value = "19">20</option>
                        <option value = "20">21</option>
                        <option value = "21">22</option>
                        <option value = "22">23</option>
                        <option value = "23">24</option>
                        <option value = "24">25</option>
                    </select></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="获得窗口数目" onClick="GetWndNum();"/></td>
                <td width="50%" align="center"><input id="TextGetWindowNum" size="7" type="text" /></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="设置窗口数目" onClick="SetWndNum();"/></td>
                <td width="50%" align="center"><input id="TextSetWindowNum" size="7" type="text" /></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="创建监控点列表" onclick="initCameraList();"/></td>
                <td width="50%" align="center"><input type="button" value="组树" onclick="initTree();"/></td>
            </tr>
            <tr>
                <td align="center">监控点索引</td>
            </tr>
            <tr>
                <td  align="center"><input type="text" id="CamerIndexCode" width = 250px></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="根据索引预览" onclick="StartPreviewByIndexCode();"></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="索引指定预览" onclick="StartInWndByIndexCode();"></td>
                <td width="50%" align="center">
                    <select id="IndexCodePreview" name="D5">
                        <option value = "0">1</option>
                        <option value = "1">2</option>
                        <option value = "2">3</option>
                        <option value = "3">4</option>
                        <option value = "4">5</option>
                        <option value = "5">6</option>
                        <option value = "6">7</option>
                        <option value = "7">8</option>
                        <option value = "8">9</option>
                        <option value = "9">10</option>
                        <option value = "10">11</option>
                        <option value = "11">12</option>
                        <option value = "12">13</option>
                        <option value = "13">14</option>
                        <option value = "14">15</option>
                        <option value = "15">16</option>
                        <option value = "16">17</option>
                        <option value = "17">18</option>
                        <option value = "18">19</option>
                        <option value = "19">20</option>
                        <option value = "20">21</option>
                        <option value = "21">22</option>
                        <option value = "22">23</option>
                        <option value = "23">24</option>
                        <option value = "24">25</option>
                    </select></td>
            </tr>
            <tr>
                <td width="50%" align="center"><input type="button" value="索引空闲预览" onclick="StartFreeWndByIndexCode();"></td>
            </tr>
        </table>
        <br />
        <div style="text-align:left;background-color: #C0C0C0">云台控制</div>
        <br />
        <table width="100%" style="border: thin solid #C0C0C0">
            <tr>
                <td width="40%">
                    <table width="100%" >
                        <tr>
                            <td width="33%" align="center"><input type="button" class="ptzBtn" value="左上" onMouseDown = "PTZControl('PTZLeftUp')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td width="33%" align="center"><input type="button" class="ptzBtn" value="上" onMouseDown="PTZControl('PTZUp')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td width="34%" align="center"><input type="button" class="ptzBtn" value="右上" onMouseDown="PTZControl('PTZRightUp')" onMouseUp="PTZControl('PTZStop')" /></td>
                        </tr>
                        <tr>
                            <td align="center"><input type="button" class="ptzBtn" value="左" onMouseDown="PTZControl('PTZLeft')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td align="center"><input type="button" class="ptzBtn" value="自转" onMouseDown="PTZControl('PTZAuto')" /></td>
                            <td align="center"><input type="button" class="ptzBtn" value="右" onMouseDown="PTZControl('PTZRight')" onMouseUp="PTZControl('PTZStop')"/></td>
                        </tr>
                        <tr>
                            <td align="center"><input type="button" class="ptzBtn" value="左下" onMouseDown="PTZControl('PTZLeftDown')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td align="center"><input type="button" class="ptzBtn" value="下" onMouseDown="PTZControl('PTZDown')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td align="center"><input type="button" class="ptzBtn" value="右下" onMouseDown="PTZControl('PTZRightDown')" onMouseUp="PTZControl('PTZStop')"/></td>
                        </tr>
                    </table>
                </td>
                <td width="20%"><input type="button" class="ptzBtn" value="停止" onMouseDown="PTZControl('PTZStop')" /></td>
                <td width="40%">
                    <table width="100%" >
                        <tr>
                            <td width="33%" align="center"><input type="button" value="+" onMouseDown="PTZControl('PTZAddTimes')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td width="33%" align="center">焦距</td>
                            <td width="34%" align="center"><input type="button" value="-" onMouseDown="PTZControl('PTZMinusTimes')" onMouseUp="PTZControl('PTZStop')"/></td>
                        </tr>
                        <tr>
                            <td align="center"><input type="button" value="+" onMouseDown="PTZControl('PTZFarFocus')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td align="center">焦点</td>
                            <td align="center"><input type="button" value="-" onMouseDown="PTZControl('PTZNearFocus')"  onMouseUp="PTZControl('PTZStop')"/></td>
                        </tr>
                        <tr>
                            <td align="center"><input type="button" value="+" onMouseDown="PTZControl('PTZLargeAperture')" onMouseUp="PTZControl('PTZStop')"/></td>
                            <td align="center">光圈</td>
                            <td align="center"><input type="button" value="-" onMouseDown="PTZControl('PTZSmallAperture')" onMouseUp="PTZControl('PTZStop')"/></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <table width="100%" style="border: thin solid #C0C0C0">
            <tr>
                <td width="40%"><input type="button" value="调用预置点" onClick="GetPt()" /></td>
                <td width="60%">
                    <!--
                    <select style="width:130px" id="SelectGetpt">
                        <option value = "1">1</option>
                        <option value = "2">2</option>
                        <option value = "3">3</option>
                        <option value = "4">4</option>
                        <option value = "5">5</option>
                        <option value = "6">6</option>
                        <option value = "7">7</option>
                        <option value = "8">8</option>
                        <option value = "9">9</option>
                        <option value = "10">10</option>
                        <option value = "11">11</option>
                        <option value = "12">12</option>
                        <option value = "13">13</option>
                        <option value = "14">14</option>
                        <option value = "15">15</option>
                        <option value = "16">16</option>
                    </select>
                        -->
                    <input type="text" id="usePreset" value="1"/>
                </td>
            </tr>
            <tr>
                <td width="40%"><input type="button" value="设置预置点" onClick="SetPt()" /></td>
                <td width="60%">
                    <!--
                    <select style="width:130px" id="SelectSetpt">
                        <option value = "1">1</option>
                        <option value = "2">2</option>
                        <option value = "3">3</option>
                        <option value = "4">4</option>
                        <option value = "5">5</option>
                        <option value = "6">6</option>
                        <option value = "7">7</option>
                        <option value = "8">8</option>
                        <option value = "9">9</option>
                        <option value = "10">10</option>
                        <option value = "11">11</option>
                        <option value = "12">12</option>
                        <option value = "13">13</option>
                        <option value = "14">14</option>
                        <option value = "15">15</option>
                        <option value = "16">16</option>
                    </select>
                    -->
                    <input type="text" id="setPreset" value="1"/>
                </td>
            </tr>
        </table>
        <br />
        <div style="text-align:left;background-color: #C0C0C0">图像参数</div>
        <br />
        <table width="100%" style="border: thin solid #C0C0C0">
            <tr>
                <td width="80%">
                    <table width="100%" >
                        <tr>
                            <td width="25%" align="center">亮度</td>
                            <td width="75%" align="center"><input id="TextBright" type="text" style="width:130px" /></td>
                        </tr>
                        <tr>
                            <td align="center">对比度</td>
                            <td align="center"><input id="TextConstrast" type="text" style="width:130px" /></td>
                        </tr>
                        <tr>
                            <td align="center">饱和度</td>
                            <td align="center"><input id="TextSaturation" type="text" style="width:130px" /></td>
                        </tr>
                        <tr>
                            <td align="center">色调</td>
                            <td align="center"><input id="TextHue" type="text" style="width:130px" /></td>
                        </tr>
                    </table>
                </td>
                <td width="20%"><input type="button" value="获取" onClick="GetVideoEffect()" /><br/><input type="button" value="设置" onClick="SetVideoEffect()" /></td>
            </tr>
        </table>
        <br />
        <div style="text-align:left;background-color: #C0C0C0">本地配置</div>
        <br />
        <table width="100%" style="border: thin solid #C0C0C0">
            <tr>
                <td width="40%" align="right">
                    抓图格式
                </td>
                <td width="55%" align="center">
                    <select style="width: 130px" id="SelectPicType">
                        <option value="0">
                            JPEG
                        </option>
                        <option value="1">
                            BMP
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">连续抓图方式</td>
                <td>
                    <select style="width: 130px" id="SelectCapMode">
                        <option value="0">
                            按时间
                        </option>
                        <option value="1">
                            按帧
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">抓图时间间隔,单位(ms)</td>
                <td align="center"><input type="text" id="TextTimeSpan"></td>
            </tr>
            <tr>
                <td align="right">抓图张数</td>
                <td align="center"><input type="text" id="TextCapCounts"></td>
            </tr>
            <tr>
                <td align="right">
                    抓图路径
                </td>
                <td align="center">
                    <input id="TextPicPath" type="text" style="width: 130px"
                           value="C:\CapPic" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    最小抓图磁盘空间
                </td>
                <td align="center">
                    <select style="width: 130px" id="MinDiskSpaceForCap">
                        <option value="256">
                            256MB
                        </option>
                        <option value="512">
                            512MB
                        </option>
                        <option value="1024">
                            1GB
                        </option>
                        <option value="2048">
                            2GB
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">
                    紧急录像路径
                </td>
                <td align="center">
                    <input id="TextRecordPath" type="text" style="width: 130px"
                           value="C:\Record" />
                </td>
            </tr>
            <tr>
                <td align="right">录像分包方式</td>
                <td align="center">
                    <select style="width: 130px" id="RecordMode">
                        <option value="0">
                            按时间分包
                        </option>
                        <option value="1">
                            按大小分包
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">
                    录像文件按秒
                </td>
                <td align="center">
                    <input type="text" id="TextRecordIime">
                </td>
            </tr>
            <tr>
                <td align="right">
                    录像文件包大小
                </td>
                <td align="center">
                    <select style="width: 130px" id="PreviewPkgSize">
                        <option value="256000000">
                            256MB
                        </option>
                        <option selected="selected" value="512000000">
                            512MB
                        </option>
                        <option value="1024000000">
                            1GB
                        </option>
                        <option value="2048000000">
                            2GB
                        </option>
                    </select>
                </td>
            </tr>
            <!--					<tr>
                                     <td align="right">最长录像时间,取0不限制</td>
                                     <td align="center"><input type="text" id="TextMLongTime"></td>
                                </tr>-->
            <tr>
                <td align="right">
                    最小录像磁盘空间
                </td>
                <td align="center">
                    <select style="width: 130px" id="MinDiskSpaceForRec">
                        <option value="256">
                            256MB
                        </option>
                        <option value="512">
                            512MB
                        </option>
                        <option value="1024">
                            1GB
                        </option>
                        <option value="2048">
                            2GB
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="button" value="设置本地参数" onClick="SetlocalParam()" />
                </td>
            </tr>
        </table>
    </div>

    <div style="float:left;overflow:hidden" id="objecthtml">
        <!-- &nbsp;&nbsp;&nbsp;<br />
        &nbsp;&nbsp;&nbsp;&nbsp;
            添加预览控件（需要先在windows下注册） -->

        <table width="100%" style="    border-spacing:0px">
            <tr><td colspan="2"  id="">
                </td></tr>
            <tr class="showandhide" style="display: none"><td>
                <div style="text-align:left;background-color: #C0C0C0;width: 318px; ">调用信息</div>
                <div><textarea id="TextInfo" cols="37" rows="12" wrap="physical"></textarea></div>
            </td>
                <td>
                    <div style="text-align:left;background-color: #C0C0C0;width: 320px;">触发事件信息</div>
                    <div><textarea id="MsgInfo" cols="37" rows="12" wrap="physical"></textarea></div>
                </td>
            </tr>
        </table>
    </div>

    <div class="showBtn hideBtn" id="cameraList" style="float:left;overflow:auto;border: thin solid #808080；">
        <ul id="tree"></ul>
    </div>
    <%--width:250px;height:500px;--%>

</div>
<br/>

</body>

</html>